<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Op Art Generator and Animator</title>
		<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
		<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
	</head>
	<body>
		<h1>Welcome to Op Art Generator and Animator</h1>
		<br>
		<div class="container" style="display: flex;">
        	<div style="width: 50%;">
            	<img src="{{ url_for('static', filename=graph) }}" width="90%" onclick="showImg()" class="output" />
            	<p>Kiss<p>
        	</div>
        	<div style="flex-grow: 1;">
        		<form action="home" method="post">
					<input type="submit" value="Back to Image Selector" id="home" class="button">
				</form>
				<br>
            	<form action="output" method="post" id="outputForm">
					<span>Transparency(%)</span>
					<input type="range" id="shapeAlpha" name="shapeAlpha_input" min="0" max="100" step="1" value="{{ initShapeAlpha }}" class="slider">
					<input type="number" id="shapeAlphaValue" name="shapeAlpha_input_textbox" min="0" max="100" step="1" value="{{ initShapeAlpha }}" required>
					<br>
					<span>Mode</span>
					<select name="mode_input" id="mode">
  						<option value="png" {% if mode == "png"%} selected {% endif %}>PNG</option>
  						<option value="svg" {% if mode == "svg"%} selected {% endif %}>SVG</option>
					</select>
					<br>
					<br>
					<span>Image Height</span>
					<input type="number" id="height" name="height_input" min="1" max="9999" step="1" value="{{ initHeight }}" required>
					<br>
					<span>Shape Base</span>
					<input type="number" id="base" name="base_input" min="0" max="9999" step="1" value="{{ initBase }}" required>
					<br>
					<span>Kiss Point</span>
					<input type="number" id="kissPoint" name="kissPoint_input" min="0" max="9999" step="1" value="{{ initKissPoint }}" required>
					<br>
					<span>Curve (Quadratic Coefficient)</span>
					<input type="number" id="curve" name="curve_input" required min="0.01" max="10" step="0.01" value="{{ initCurve }}" required>
					<br>
					<span>Narrowest Distance</span>
					<input type="number" id="distance" name="distance_input" required min="-999" max="999" step="1" value="{{ initDistance }}" required>
					<br>
					<span>Accuracy</span>
					<input type="number" id="accuracy" name="accuracy_input" required min="0.01" max="10" step="0.01" value="{{ initAccuracy }}" required>
					<br>
					<br>
					<span>Take top-left corner as (0,0), right and down as positive &#x1d499; and &#x1d432; respectively.</span>
					<br>
					<br>
					<span>Formula for the curve</span>
					<h2>{{formulaMsg.decode('utf-8')}}</h2>
					<br>
					<br>
					<input type="submit" value="Generate" class="button">
				</form>
        	</div>
    	</div>
    	<script type="text/javascript">
    		var outputForm = document.getElementById("outputForm");
    		var inputs = outputForm.getElementsByTagName("input");
    		var selects = outputForm.getElementsByTagName("select");

			function checkValidThenSubmit(){
    			if (outputForm.checkValidity()) {
					outputForm.submit();
				} else {
					outputForm.reportValidity();
				}
    		}

			for (let i = 0; i < inputs.length; i++) {
				inputs[i].onchange = function() {
					checkValidThenSubmit();
				}
			}

			for (let i = 0; i < selects.length; i++) {
				selects[i].onchange = function() {
					checkValidThenSubmit();
				}
			}

    		var shapeAlphaSlider = document.getElementById("shapeAlpha");
			var shapeAlphaValue = document.getElementById("shapeAlphaValue");
			shapeAlphaValue.value = shapeAlphaSlider.value; // Display the default slider value

			// Update the current slider value (each time you drag the slider handle)
			shapeAlphaSlider.oninput = function() {
  				shapeAlphaValue.value = this.value;
			}

			// Overrides for loop on top
			shapeAlphaValue.onchange = function() {
            	shapeAlphaSlider.value = this.value;
            	checkValidThenSubmit();
            }

            var imgSrc = "{{ url_for('static', filename=graph) }}"
			if (imgSrc == "/static/out/output.png" || imgSrc == "/static/out/output.svg") {
				document.querySelector("img.output").style.cursor = "pointer";
			}

			function showImg() {
				if (imgSrc == "/static/out/output.png" || imgSrc == "/static/out/output.svg") {
					window.location.href='{{ url_for("fullScreen") }}';
				}
			}
    	</script>
	</body>
</html>